@import '@/styles/utils.scss';
@import '@/styles/colors.scss';

.item {
  border: 1px solid #e8e8e8;

  .header {
    background-color: #f5f5f5;
    height: px2rem(43);
    box-sizing: border-box;
    font-weight: 400;
    display: flex;
    align-items: center;
    color: $fontBlack;
    font-size: px2rem(12);
    border-bottom: 1px solid #e8e8e8;

    .header__date {
      margin-left: px2rem(20);
      width: px2rem(265);
    }

    .header__no {
    }
    .header__del {
      background-image: url('~@/assets/home/icon_normal.png');
      background-position: 0 -927px;
      height: 16px;
      width: 14px;
      margin-right: px2rem(20);
      margin-left: auto;
      cursor: pointer;

      &:hover {
        background-position: 0 -901px;
      }
    }
  }
  .body {
    display: flex;
    font-size: px2rem(12);
    color: $fontBlack;

    .col {
      border-right: 1px solid #e8e8e8;
      display: flex;
      align-items: center;
      padding: px2rem(20) 0;

      &:last-child {
        border: 0;
      }

      .images {
        margin-left: px2rem(20);
        width: px2rem(338);

        .image {
          width: px2rem(100);
          height: px2rem(100);
          margin-right: px2rem(10);
        }
      }
      .num {
        width: px2rem(130);
        text-align: center;
      }
      .status {
        width: px2rem(130);
        text-align: center;
      }
      .status_red {
        color: red;
      }
      .price {
        width: px2rem(139);
        text-align: center;
        font-size: px2rem(14);
        font-weight: 700;
      }
    }
    .operation {
      display: flex;
      flex-direction: column;
      justify-content: center;

      .pay {
        color: #fff;
        border: 1px solid #b4a078;
        background-color: #b4a078;
        border-radius: 2px;
        width: px2rem(96);
        height: px2rem(28);
        line-height: px2rem(26);
        font-size: px2rem(12);
        text-align: center;
        margin-bottom: px2rem(4);
        cursor: pointer;
      }
      .detail {
        width: px2rem(129);
        text-align: center;
        color: $fontBlue;
        cursor: pointer;

        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
}
